<template>
    <!--    面包屑导航-->
    <div style="margin-top: 20px;margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item ><b>我的课堂</b></el-breadcrumb-item>
            <el-breadcrumb-item>课程信息</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
<!-- 表格 -->
    <div class="table-container">
    <el-table :data="tableData" stripe style="width: 80%">
        <el-table-column prop="courseNumber" label="课程号" width="180" />
        <el-table-column prop="course" label="课程名" width="180" />
        <el-table-column prop="teacherName" label="任课老师" />
        <el-table-column label="操作" >
            <template #default="scope">
                <el-button
                    type="primary"
                    size="small"
                    @click="handleSignIn(scope.row.courseNumber)"
                >
                    签到<el-icon class="el-icon--right"><ArrowRight /></el-icon>
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    </div>
</template>

<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "../../../../router/index.js";
import request8090 from "../../../../utils/request8090.js";
//页面初始化调用函数
onMounted(()=>{
    course()
})

/*获取课程信息*/
const tableData =ref([])
/*表格数据*/
const course=()=>{
    request8090({
        url:'/student/getclasses',
        method:'GET',
        params:{sNumber:sessionStorage.getItem("snumber")},
    }).then(res=>{
        if (200 == res.data.errorCode){
            tableData.value=res.data.data;
        }
    })
}
// 点击签到按钮时存储课程号并跳转路由
const handleSignIn = (courseNumber) => {
    sessionStorage.setItem("courseNumber", courseNumber);
    router.push('/classStart/signView'); // 跳转到签到页面
}
</script>

<style scoped>
.table-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    margin-top: 20px; /* 可选，为了美观添加一些顶部边距 */
}
</style>